<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>报修申请</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
		<style>
			body {
				background-color: #f8f9fa;
				font-family: 'Arial', sans-serif;
				color: #444;
				line-height: 1.6;
			}

			.header-section {
				background-color: #007bff;
				color: white;
				padding: 15px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.header-section a {
				color: white;
			}

			.form-section {
				background-color: white;
				padding: 25px;
				border-radius: 10px;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
				margin: 20px;
			}

			.form-label {
				font-weight: 600;
				color: #555;
				font-size: 15px;
				margin-bottom: 8px;
			}

			.form-control {
				border-radius: 6px;
				border: 1px solid #e0e0e0;
				padding: 12px;
				transition: all 0.3s ease;
				font-size: 15px;
			}

			.form-control:focus {
				border-color: #007bff;
				box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
			}

			.upload-box {
				border: 2px dashed #007bff;
				border-radius: 10px;
				width: 100%;
				min-height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				transition: all 0.3s ease;
				margin-top: 8px;
				padding: 15px;
				text-align: center;
				background-color: rgba(0, 123, 255, 0.03);
			}

			.upload-box:hover {
				background-color: rgba(0, 123, 255, 0.08);
			}

			.upload-box i {
				font-size: 24px;
				color: #007bff;
			}

			.upload-container {
				width: 100%;
			}

			.image-upload-btn {
				color: #007bff;
				font-size: 14px;
				font-weight: 500;
				display: block;
				cursor: pointer;
				line-height: 1.4;
			}

			.image-upload-btn input[type="file"] {
				display: none;
			}

			.preview-container {
				display: flex;
				flex-wrap: wrap;
				gap: 12px;
				margin-top: 15px;
			}

			.preview-image-wrapper {
				position: relative;
				border-radius: 8px;
				overflow: hidden;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
				transition: transform 0.2s ease;
			}

			.preview-image-wrapper:hover {
				transform: translateY(-2px);
			}

			.preview-image {
				width: 120px;
				height: 120px;
				object-fit: cover;
			}

			.remove-btn {
				position: absolute;
				top: 5px;
				right: 5px;
				background-color: #ff4444;
				color: white;
				border: none;
				border-radius: 50%;
				width: 22px;
				height: 22px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				font-size: 12px;
				opacity: 0.9;
				transition: opacity 0.2s ease;
			}

			.remove-btn:hover {
				opacity: 1;
			}

			.bottom-actions {
				position: fixed;
				bottom: 0;
				width: 100%;
				background-color: white;
				padding: 15px 20px;
				border-top: 1px solid #e9ecef;
				display: flex;
				justify-content: flex-end;
				gap: 12px;
				box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
			}

			.btn-primary {
				background-color: #007bff;
				border: none;
				border-radius: 6px;
				padding: 10px 24px;
				color: white;
				cursor: pointer;
				transition: all 0.3s ease;
				font-size: 15px;
				font-weight: 500;
			}

			.btn-primary:hover {
				background-color: #0069d9;
				transform: translateY(-1px);
			}

			.btn-outline-secondary {
				border: 1px solid #ddd;
				border-radius: 6px;
				padding: 10px 20px;
				cursor: pointer;
				transition: all 0.3s ease;
				font-size: 15px;
				color: #666;
				background-color: transparent;
			}

			.btn-outline-secondary:hover {
				background-color: #f8f9fa;
				border-color: #ccc;
			}

			/* 标题样式 */
			.form-section .fs-5 {
				font-size: 18px !important;
				color: #333;
				font-weight: 600;
				margin-bottom: 20px;
			}

			/* 隐藏左边的 +1 */
			#img1 {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="header-section d-flex justify-content-between align-items-center">
			<a href="../YH/YongHuDuan.html" class="text-decoration-none">
				<i class="bi bi-arrow-left"></i>
			</a>
			<h5 class="mb-0" style="font-size: 17px; font-weight: 600;">维修工单</h5>
			<div class="d-flex align-items-center">
				<a href="YongHuDuan.html" class="text-decoration-none me-3">
					<i class="bi bi-three-dots-vertical"></i>
				</a>
				<a href="#" class="text-decoration-none">
					<i class="bi bi-qr-code"></i>
				</a>
			</div>
		</div>
		<div class="container-fluid p-0" id="addForm">
			<div class="form-section">
				<p class="fs-5 mb-3">请填写维修信息：</p>
				<div class="form-group mb-4">
					<label for="location" class="form-label">* 故障位置</label>
					<input type="text" class="form-control" id="contact" placeholder="请输入故障位置" name="address">
				</div>
				<div class="form-group mb-4">
					<label for="contact" class="form-label">* 联系人</label>
					<input type="text" class="form-control" id="contactt" placeholder="请输入联系人" name="lxrname">
				</div>
				<div class="form-group mb-4">
					<label for="phone" class="form-label">* 联系电话</label>
					<input type="text" class="form-control" id="phone" placeholder="请输入联系电话" name="lxrphone">
				</div>
				<div class="form-group mb-4">
					<label for="desc" class="form-label">* 故障描述</label>
					<textarea class="form-control" id="desc" placeholder="请详细描述故障情况..." name="description"
						rows="4"></textarea>
					<input type="text" id="uid" hidden />
				</div>
				<div class="form-group">
					<label class="form-label">故障图片</label>
					<div class="upload-box" id="uploadBox">
						<i class="bi bi-plus-lg" id="img1">1</i>
						<div class="upload-container">
							<label class="image-upload-btn" for="fileInput">
								<i class="bi bi-image me-2"></i>点击上传图片<br>
								<span style="font-size: 12px; color: #888;">(支持1-3张图片)</span>
								<input type="file" id="fileInput" accept=".gif,.bmp,.jpg,.png,.mp4" multiple>
							</label>
						</div>
					</div>
					<div class="preview-container" id="previewContainer"></div>
				</div>
			</div>
			<div class="bottom-actions">
				<button class="btn btn-outline-secondary me-2">关闭</button>
				<button class="btn btn-primary" id="tijiao">提交申请</button>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/jquery.js"></script>
		<script src="../js/request/base.js"></script>
		<script src="js/scriptt/YuYueWeiXiu.js"></script>
	</body>
</html>